<template>
  <div class="appLink" v-if="$store.state.gyzqLinkApp">
    <img
      class="u-c-close"
      src="../../assets/images/gyzq/close.png"
      alt=""
      @click="close"
    />
    <img class="u-c-pic" src="../../assets/images/gyzq/logo.png" alt="" />
    <div class="u-c-title">
      <p>更多精彩内容</p>
      <p>尽在国元点金</p>
    </div>
    <button class="u-c-btn" @click="openApp">打开APP</button>
  </div>
</template>
<script>
import fun from "../../util/function";
export default {
  props: {},
  data() {
    return {};
  },
  methods: {
    openApp() {
      let gydjKey =
        "If/dWxyj9uqR0Isy3EHjZ8LNjhBkKAfEY92npupKsSc0EurMvIEKhXWVtMDoeqL/K/i%E5%8A%A0%E5%8F%B7Ftyvm0TeF2aVFZsATmb6YXjxvUVmNbbM0srJNJy5Vd%E5%8A%A0%E5%8F%B7ZzYPpK%E5%8A%A0%E5%8F%B7ykaOAR4MhxxIqw0W1IgqGXdpgPmE8cRDn7IObg2sKiAJKYKY2g54A=";
      let key = fun.getQueryString("key", false);
      if (key) {
        // key = encodeURIComponent(key);
      } else {
        key = gydjKey;
      }
      window.open(
        `http://www.gyzq.com.cn/gyzq/gydj/gydj.html?jumpUrl=new&key=${key}`,
        "_self"
      );
    },
    close() {
      this.$store.commit("setGyzqLinkApp", false);
    }
  }
};
</script>
<style scoped>
.appLink {
  width: 100vw;
  height: 136px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.u-c-close {
  width: 42px;
  height: 42px;
  margin-left: 25px;
}
.u-c-pic {
  width: 102px;
  height: 102px;
  margin: 0 40px 0 30px;
}
.u-c-title {
  font-size: 25px;
  color: #fff;
  line-height: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.u-c-btn {
  width: 190px;
  height: 60px;
  background: #489cd5;
  border-radius: 8px;
  font-size: 28px;
  color: #fff;
  margin-left: 135px;
  border: 0;
  outline: none;
}
</style>
